<template>
  <div class="container">
    <div class="add-menu">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm"  class="picture-ruleForm" label-width="90px">
        <el-form-item :label="$t('brandmanagement.addbrand.ppmc')" prop="brandname">
          <el-input v-model="ruleForm.brandname" :placeholder="$t('brandmanagement.addbrand.qsrppmc')"></el-input>
        </el-form-item>
        <el-form-item class="upload-img" :label="$t('brandmanagement.addbrand.pplg')" prop="brandLogo">
            <l-upload
              :limit="1"
              v-model="ruleForm.brandLogo"  
              :text="$t('brandmanagement.addbrand.jy120')"
            >
            </l-upload>
        </el-form-item>
        <el-form-item class="upload-img" label="品牌详情封面图" prop="brandImage">
            <l-upload
              :limit="1"
              v-model="ruleForm.brandImage"  
            >
            </l-upload>
        </el-form-item>
        <el-form-item label="品牌介绍" prop="brandIntroduce">
          <el-input v-model="ruleForm.brandIntroduce" placeholder="请输入品牌介绍"></el-input>
        </el-form-item>
        <el-form-item
              class="goods-brand"
              label="风格"
              required
              prop="styleId"
            >
              <el-select
                class="select-input"
                v-model="ruleForm.styleName"
                placeholder="请选择商品风格"
                @change="changeStyleName"
              >
                <el-option
                  v-for="(item,index) in styleList"
                  :key="index"
                  :label="item.name"
                  :value="{label:item.name,value:item.id}"
                >
                </el-option>
              </el-select>
        </el-form-item>
        <!-- <el-form-item :label="$t('brandmanagement.addbrand.ssfl')" prop="brandtype">
          <el-select class="select-input" multiple filterable v-model="ruleForm.brandtype" :placeholder="$t('brandmanagement.addbrand.qxzssfl')">
            <el-option
              v-for="item in brandTypeList"
              :key="item.cid"
              :label="item.pname"
              :value="item.cid">
            </el-option>
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item :label="$t('brandmanagement.addbrand.ssgj')" prop="countries">
          <el-select class="select-input" filterable v-model="ruleForm.countries" :placeholder="$t('brandmanagement.addbrand.qxzssgj')">
            <el-option v-for="(item,index) in countriesList" :key="index" :label="item.zh_name" :value="item.zh_name">
                <div @click="getIds(item.id)">{{ item.zh_name }}</div>
            </el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item class="textarea" :label="$t('brandmanagement.addbrand.bz')" prop="note">
          <el-input type="textarea" v-model="ruleForm.note" :placeholder="$t('brandmanagement.addbrand.qtxbz')"></el-input>
        </el-form-item>
        <div class="form-footer">
          <el-form-item>
            <el-button class="bgColor" type="primary" @click="submitForm('ruleForm')">{{ $t('DemoPage.tableFromPage.save') }}</el-button>
            <el-button class="bdColor left_kep" @click="$router.go(-1)" plain>{{ $t('DemoPage.tableFromPage.cancel') }}</el-button>
          </el-form-item>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import { addBrand, getClassInfo, getCountry } from '@/api/goods/brandManagement'
import { dictionaryList } from '@/api/Platform/numerical'
import {getStorage} from '@/utils/storage'
export default {
  name: 'addbrand',

  data() {
    return {
      ruleForm: {
        brandname: '',
        brandLogo: '',
        brandImage: '',
        brandIntroduce:'',
        //风格
        styleId: '',
        styleName: '',
        brandtype: '',
        countries: '',
        note: ''
      },
      rules: {
        brandtype: [
          { required: true, message: this.$t('brandmanagement.addbrand.qxzssfl') , trigger: 'blur' }
        ],
        // countries: [
        //   { required: true, message: this.$t('brandmanagement.addbrand.qxzssgj') , trigger: 'change' }
        // ],
        brandname: [
          { required: true, message: this.$t('brandmanagement.addbrand.qsrppmc') , trigger: 'blur' }
        ],
        brandLogo: [
          { required: true, message: this.$t('brandmanagement.addbrand.qscpplg') , trigger: 'change' }
        ],
        brandImage: [
          { required: true, message: "请上传品牌详情封面图" , trigger: 'change' }
        ],
      },
      //风格
      styleList: [],
      brandTypeList: [],

      countriesList: [],

      id: null,
      countriesId: null
    }
  },

  created() {
    this.getStyleList()
    this.getClassInfos()
    this.getCountrys()
  },

  watch: {
    'ruleForm.brandLogo'() {
      if(this.ruleForm.brandLogo) {
        this.$refs.ruleForm.clearValidate('brandLogo')
      }
    },
  },

  methods: {
    // 获取所属分类
    async getClassInfos() {
        const res = await getClassInfo({
            api: 'admin.goods.getClassInfo',
            pageNo: 1,
            pageSize: 999,
        })
        console.log(res);
        this.brandTypeList = res.data.data.classInfo
    },
    async getStyleList() {
      const res = await dictionaryList({
        api: 'app.product.styleList'
      })

      console.log("styleList", res.data.data)
      this.styleList = res.data.data
      this.styleList.forEach((item, index) => {
      console.log("item.value",item.id)
        // console.log("ruleform.styleid",this.ruleForm.styleId)
      if (Number(item.id) == this.ruleForm.styleId) {
        this.ruleForm.styleName = item.name;
        this.ruleForm.styleId = styleId;
      }
    })
    },
    //风格名称赋值
    changeStyleName(item) {
      const { value, label } = item
      this.ruleForm.styleId = value
      this.ruleForm.styleName = label
    },

    // 获取国家列表
    async getCountrys() {
        const res = await getCountry({
            api: 'admin.goods.getCountry',
        })
        console.log(res);
        this.countriesList = res.data.data
    },

    getIds(value) {
      this.countriesId = value
    },
    

    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        console.log(this.ruleForm);
        if (valid) {
        try {
          if(this.ruleForm.brandname.length > 15) {
            this.$message({
              message: '品牌名称长度不能大于15个字符',
              type: 'error',
              offset:102
            })
            return
          }
          if(this.ruleForm.note.length > 50) {
            this.$message({
              message: '备注长度不能大于50个字符',
              type: 'error',
              offset:102
            })
            return
          }
          const mchId = getStorage("mchId")
          addBrand({
              api: 'admin.goods.addBrand',
              brandName: this.ruleForm.brandname,
              brandLogo: this.ruleForm.brandLogo,
              brandImage: this.ruleForm.brandImage,
              brandIntroduce:this.ruleForm.brandIntroduce,
              mchId: mchId,
              // 风格
              styleId: this.ruleForm.styleId,
              styleName: this.ruleForm.styleName,
              // brandClass: this.ruleForm.brandtype.join(','),
              producer: this.countriesId,
              remarks: this.ruleForm.note
          }).then(res => {
            if(res.data.code == '200') {
              console.log(res);
              this.$message({
                  message: this.$t('zdata.xzcg'),
                  type: 'success',
                  offset: 102
              })
              // this.$router.go(-1)
              this.$router.push("/goods/brandmanagement/brandlist");
            }
          })
        } catch (error) {
          this.$message({
              message: error.message,
              type: 'error',
              showClose: true
          })
        }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },

  }
}
</script>

<style scoped lang="less">
/deep/ .el-tag__close.el-icon-close {
    background-color: #97a0b4 !important;
    color: #fff !important;
}
/deep/ .el-tag.el-tag--info .el-tag__close:hover {
    color: #fff !important;
    background-color: #b2bcd1 !important;
}
.container {
  width: 100%;
  height: 737px;
  background-color: #fff;
  padding: 40px 0 0 0;
  color: #414658;
  border-radius: 4px;
  /deep/.add-menu {
    display: flex;
    justify-content: center;
    .el-form-item {
      display: flex;
      &:not(:last-child) {
        .el-form-item__content {
          margin-left: 0px !important;
        }
      }
      .el-form-item__content {
        width: 580px;
      }
      .select-input {
        width: 580px;
        // height: 40px;
      }
      .left_kep{
        margin-left: 14px;
      }
    }
      
  }

  /deep/.el-form-item__label {
    font-weight: normal;
  }
}
</style>